<template>
  <panel title="最近7天设备异常统计">
    <div class="ml20 mr20" v-if="show">
      <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></bar>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'DeviceAlert',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null,
      show: false
    }
  },

  mounted () {
    setTimeout(this.initialize, 400)
  },

  methods: {
    initialize () {
      const textStyle = {
        color: '#99A1A8'
      }
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        grid: {
          containLabel: true,
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%'
        },
        xAxis: [{
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle
          }
        }],
        yAxis: [{
          type: 'category',
          data: ['道闸', '门禁', '供配电', '水泵'],
          axisLabel: {
            textStyle
          }
        }],
        series: [{ // date, AQIindex, PM2.5, PM10, CO, NO2, SO2
          name: '告警数',
          type: 'bar',
          barWidth: 17,
          data: [3, 2, 14, 26]
        }]
      }
      this.show = true
    }
  }
}
</script>
